/**
 * 路由配置文件
 * 负责管理应用的所有路由规则和页面映射关系
 * 使用Vue Router 4进行路由管理
 */

// 从vue-router中导入创建路由实例所需的函数
// createRouter: 创建路由实例的函数
// createWebHistory: 创建HTML5 History模式的函数
import { createRouter, createWebHistory } from 'vue-router'

// 导入各个页面组件
// OrdersView: 订单管理页面组件
import OrdersView from '@/views/OrdersView.vue'
// AddOrderView: 添加订单页面组件
import AddOrderView from '@/views/AddOrderView.vue'
// CustomerView: 客户管理页面组件
import CustomerView from '@/views/CustomerView.vue'
// DashboardView: 工作台页面组件
import DashboardView from '@/views/Dashboard.vue'
// SupplierView: 供应商管理页面组件
import SupplierView from '@/views/SupplierView.vue'
// ProductView: 产品管理页面组件
import ProductView from '@/views/ProductView.vue'
// ProductCategoryView: 产品分类管理页面组件
import ProductCategoryView from '@/views/ProductCategoryView.vue'
// PrintTemplateDesign: 打印模板设计页面组件
import PrintTemplateDesign from '@/views/PrintTemplateDesign.vue'
// ScanStorageView: 扫码入库页面组件
import ScanStorageView from '@/views/ScanStorageView.vue'
// DeliveryOrdersView: 发货单管理页面组件
import DeliveryOrdersView from '@/views/DeliveryOrdersView.vue'

/**
 * 创建路由实例
 * 配置路由历史模式和路由规则
 * history: 使用HTML5 History模式，需要服务器配置支持
 * routes: 路由规则配置数组
 *
 * Vue Router 4的新特性：
 * 1. 使用createRouter函数创建路由实例
 * 2. 使用createWebHistory创建HTML5 History API的路由历史模式
 * 3. 路由配置更加灵活
 */
const router = createRouter({
  // 使用HTML5 History模式，需要服务器配置支持
  // import.meta.env.BASE_URL: 获取基础URL路径
  // createWebHistory: 创建基于HTML5 History API的路由历史模式
  // 优点：URL美观，没有#号；缺点：需要服务器配置支持
  history: createWebHistory(import.meta.env.BASE_URL),

  // 路由规则配置数组
  // routes: 路由配置数组，定义了应用的所有路由规则
  routes: [
    // 根路径路由配置
    {
      path: '/',                    // 根路径
      name: 'home',                 // 路由名称，用于编程式导航
      redirect: '/dashboard'        // 重定向到工作台页面
    },
    // 工作台页面路由配置
    {
      path: '/dashboard',           // 工作台页面路径
      name: 'dashboard',            // 路由名称
      component: DashboardView,     // 对应的组件
      meta: {
        title: '工作台',              // 页面标题，用于设置document.title
        icon: 'House',              // 图标名称，用于菜单显示
        requiresAuth: false         // 是否需要认证（示例项目中未启用）
      }
    },
    // 订单管理页面路由配置
    {
      path: '/orders',              // 订单管理页面路径
      name: 'orders',               // 路由名称
      component: OrdersView,         // 对应的组件
      meta: {
        title: '销售订单管理',        // 页面标题
        icon: 'Document',           // 图标名称
        requiresAuth: false         // 是否需要认证（示例项目中未启用）
      }
    },
    // 添加订单页面路由配置
    {
      path: '/orders/add',          // 添加订单页面路径
      name: 'add-order',            // 路由名称
      component: AddOrderView,      // 对应的组件
      meta: {
        title: '添加订单',            // 页面标题
        icon: 'Plus',               // 图标名称
        requiresAuth: false         // 是否需要认证（示例项目中未启用）
      }
    },
    // 客户管理页面路由配置
    {
      path: '/customers',           // 客户管理页面路径
      name: 'customers',            // 路由名称
      component: CustomerView,      // 对应的组件
      meta: {
        title: '客户管理',            // 页面标题
        icon: 'User',               // 图标名称
        requiresAuth: false         // 是否需要认证（示例项目中未启用）
      }
    },
    // 供应商管理页面路由配置
    {
      path: '/suppliers',           // 供应商管理页面路径
      name: 'suppliers',            // 路由名称
      component: SupplierView,      // 对应的组件
      meta: {
        title: '供应商管理',          // 页面标题
        icon: 'Shop',               // 图标名称
        requiresAuth: false         // 是否需要认证（示例项目中未启用）
      }
    },
    // 产品管理页面路由配置
    {
      path: '/products',           // 产品管理页面路径
      name: 'products',            // 路由名称
      component: ProductView,      // 对应的组件
      meta: {
        title: '产品管理',          // 页面标题
        icon: 'Goods',              // 图标名称
        requiresAuth: false         // 是否需要认证（示例项目中未启用）
      }
    },
    // 产品分类管理页面路由配置
    {
      path: '/product-categories',  // 产品分类管理页面路径
      name: 'product-categories',   // 路由名称
      component: ProductCategoryView, // 对应的组件
      meta: {
        title: '产品分类管理',        // 页面标题
        icon: 'Folder',             // 图标名称
        requiresAuth: false         // 是否需要认证（示例项目中未启用）
      }
    },
    // 打印模板设计页面路由配置
    {
      path: '/print-template-design',      // 打印模板设计页面路径
      name: 'print-template-design',       // 路由名称
      component: PrintTemplateDesign,      // 对应的组件
      meta: {
        title: '打印模板设计',             // 页面标题
        icon: 'Document',                  // 图标名称
        requiresAuth: false                // 是否需要认证
      }
    },
    // 扫码入库页面路由配置
    {
      path: '/scan-storage',           // 扫码入库页面路径
      name: 'scan-storage',            // 路由名称
      component: ScanStorageView,        // 对应的组件
      meta: {
        title: '扫码入库',               // 页面标题
        icon: 'Upload',                 // 图标名称
        requiresAuth: false             // 是否需要认证
      }
    },
    // 发货单管理页面路由配置
    {
      path: '/delivery-orders',        // 发货单管理页面路径
      name: 'delivery-orders',         // 路由名称
      component: DeliveryOrdersView,   // 对应的组件
      meta: {
        title: '发货单管理',            // 页面标题
        icon: 'Tickets',               // 图标名称
        requiresAuth: false            // 是否需要认证
      }
    },
    // 收款账单页面路由配置
    {
      path: '/payment-bills',          // 收款账单页面路径
      name: 'payment-bills',           // 路由名称
      // 使用动态导入，实现代码分割，提高应用性能
      component: () => import('@/views/PaymentBillsView.vue'),  // 对应的组件
      meta: {
        title: '收款账单',               // 页面标题
        icon: 'Money',                  // 图标名称
        requiresAuth: false             // 是否需要认证
      }
    },
    // 订单出库页面路由配置
    // {
    //   path: '/order-outbound',         // 订单出库页面路径
    //   name: 'order-outbound',          // 路由名称
    //   component: OrderOutboundView,      // 对应的组件
    //   meta: {
    //     title: '订单出库',               // 页面标题
    //     icon: 'Box',                   // 图标名称
    //     requiresAuth: false             // 是否需要认证
    //   }
    // },
    // 404兜底路由 - 当访问不存在的路径时重定向到工作台
    // pathMatch(.*)*: 匹配所有未定义的路径，用于处理404页面
    {
      path: '/:pathMatch(.*)*',     // 匹配所有未定义的路径
      name: 'NotFound',             // 路由名称
      redirect: '/dashboard'        // 重定向到工作台页面
    }
  ],
})

/**
 * 全局前置守卫
 * 在路由切换前执行，用于设置页面标题等全局逻辑
 * to: 即将要进入的目标路由对象
 * from: 当前导航正要离开的路由对象
 * next: 用来resolve这个钩子的函数
 *
 * 路由守卫的作用：
 * 1. 设置页面标题
 * 2. 权限验证
 * 3. 页面加载状态管理
 */
router.beforeEach((to, from, next) => {
  // 设置页面标题
  // 如果目标路由有meta.title，则设置为"页面标题 - ERP管理系统"
  // 否则设置为默认标题"ERP管理系统"
  if (to.meta.title) {
    document.title = `${to.meta.title} - ERP管理系统`
  } else {
    document.title = 'ERP管理系统'
  }

  // 这里可以添加权限验证逻辑
  // if (to.meta.requiresAuth && !isAuthenticated()) {
  //   next('/login')
  // } else {
  //   next()
  // }

  // 继续路由跳转
  // next(): 调用next函数继续路由跳转
  next()
})

// 导出路由实例，供main.js使用
// export default: 默认导出路由实例，便于在main.js中引入使用
export default router
